<template>
	<view class="body">
		<view class="submit">
			<view @click="submit(index)" :class="currentindex == index?'action':''" v-for="(item,index) in tab"
				:key="index">{{item.type}}
				<block v-if="tab[index].type=='教师'&&tab[0].personInfomations!=null" >({{tab[0].personInfomations.length}})</block>
				<block v-if="tab[index].type=='学生'&&tab[1].personInfomations!=null" >({{tab[1].personInfomations.length}})</block>
				<block v-if="tab[index].type=='家长'&&tab[2].personInfomations!=null" >({{tab[2].personInfomations.length}})</block>
			</view>
<!-- 			<navigator url="../manClassList/manClassList" class="manage" hover-class="manage_hover">
				<image src="../../static/icon/manage.png">管理</image>
			</navigator> -->
		</view>
		<scroll-view>
			<view class="name" v-for="(item,index) in tab[currentindex].personInfomations" :key="index">
				<view class="nameview">
					<image class="image" :src="tab[currentindex].personInfomations[index].photo"></image>
					{{tab[currentindex].personInfomations[index].name}}
					<view class="icon">
						<image src="../../static/icon/Phone.png" @click="call(tab[currentindex].personInfomations[index].tel)"></image>
						<image src="../../static/icon/More.png"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roleType: 0,
				tab: [{
						type: '學生',
						name: [{
								disname: '学生1',
								pic: ''
							},
						],
					},
					{
						type: '家長',
						name: [{
								disname: "家长1",
								pic: ""
							},
						],
					},
					{
						type: '任課老師',
						name: [{
								disname: "教师1",
								pic: ""
							},
						],
					},
				],
				currentindex: 0,
			}
		},
		onLoad(option) {
			//option.id为上一个页面传过来的参数（选择班级后的classid）
			this.classid=option.id
			this.roleType = uni.getStorageSync("roleType")
		},
		onShow() {
			this.getpersoninfomation()
		},
		methods: {
			submit(index) {
				this.currentindex = index;
			},
			getpersoninfomation(){
				this.$myRequest({
					url:"/teacher/getpersoninfomation/"+this.classid,
				}).then(res=>{
					this.tab=res.data.data
					})
			},
			call(phone){
				if(phone==null){
					uni.showToast({
						title:'未绑定手机号码',
						icon:'error'
					})
				}
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #f7f7f7;
		padding-top: 1vh;
	}

	.submit {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		height: 9vh;
		margin: 1vh 0vh 2vh 0vh;
		padding-left: 4vw;
		color: #b4b4b4;
		view {
			text-align: center;
			line-height: 9vh;
			padding: 0vh 2vh;
			font-size: 35upx;
		
		}
	}

	.action {
		color: #007AFF;
		border-bottom: #007AFF 4px solid;
	}

	.manage {
		align-items: center;
		justify-content: center;
		color: #6b80a7;
		padding-top: 30upx;
		image {
			width: 70upx;
			height: 70upx;
			padding-right: 6upx;
			vertical-align: middle;
		}
	}
	
	.manage_hover{
		opacity: .9;
		color: #007AFF;
	}

	.name {
		display: flex;
		background-color: #ffffff;
		height: 150upx;
		font-size: 35upx;
		padding-left: 4vw;
	}

	.nameview {
		display: flex;
		align-items: center;
	}

	.image {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin-right: 4vw;
	}

	.icon {
		position: absolute;
		left: 75vw;
		image {
			margin-left: 4vw;
			width: 50upx;
			height: 50upx;
		}
	}

</style>
